<!DOCTYPE html>
<html>
  <head>
    <title>我要预约</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      <link rel="stylesheet" href="${s.base}/mobile/lib/Mdate/needcss/Mdate.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/base.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/component.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.css">
      <style type="text/css">
          *, *:before, *:after{
              webkit-box-sizing:content-box;
              box-sizing:content-box;
          }
          .weui-popup__modal .modal-content{background: #ffffff;}
          .xyg-navigation{width:100%; height:auto;padding: 0.5rem; background: #fff;}
          .xyg-navigation .xyg-navigation-item{width:auto; padding: 0px 0.4rem; letter-spacing: 0.1rem; color: #000000; font-size: 14px; font-weight: bold;height:1.2rem; line-height: 1.2rem;float: left;}
          .xyg-navigation .xyg-navigation-line{width:0.1rem; margin:0.25rem 0.1rem; background:#0D0D0D;height:0.5rem;float: left;}
		  .xyg-comp-list-select-item {border-bottom:none;}
          .xyg-content{
              width: 94%;
              height: auto;
              background: #FFF;
              margin: 0.5rem 2%;
              padding: 0.5rem 1%;
          }
		  .lwhbg  {padding-bottom:5px;border-bottom:2px solid #cc0000;color:#cc0000;display:block;line-height:28px;}
      </style>
  </head>
  <body>
  <div class="xyg-index">
      <div class="xyg-navigation" style="position: fixed; left: 0px; top: 0px;">
          <div class="xyg-navigation-item lwhbg" onclick="window.location.href='/phone/corporationAdd?memberId=${memberId}'">社团报名</div>
          <!--<#list sysDictContentList as sysDictContent>
              <#if sysDictContent.value=='1'>
                  <div class="xyg-navigation-item"  onclick="window.location.href='/phone/signUpList?memberId=${memberId}&type=${sysDictContent.value}'">${sysDictContent.name}</div>
              </#if>
          </#list>-->
		  <div class="xyg-navigation-item" onclick="window.location.href='/phone/signUpGyList?memberId=${memberId}&type=2'">公益班报名</div>
          <div class="clearBoth"></div>
      </div>
      <div style="width: 100%; height: 2rem;"></div>
      <!--内容开始-->
      <div class="xyg-content">
          <div id="showContent">
              <div class="xyg-comp-list-select">
                  <div class="xyg-comp-list-select-item">
                      <div class="xyg-comp-list-select-item-title">
                          <span style="color: #FF0000;">*</span>社团名称
                      </div>
                      <div class="xyg-comp-list-select-item-content">
                          <input type="text" id="name" value="${webCorporation.name}" max="30" placeholder="请先填写社团名称" />
                      </div>
                  </div>
                  <div class="xyg-comp-list-select-item">
                      <div class="xyg-comp-list-select-item-title">
                          <span style="color: #FF0000;">*</span>社团人数
                      </div>
                      <div class="xyg-comp-list-select-item-content">
                          <input type="number"  id="num" value="${webCorporation.num}" maxlength="5" placeholder="请先填写社团人数" />
                      </div>
                  </div>
                  <div class="xyg-comp-list-select-item">
                      <div class="xyg-comp-list-select-item-title">
                          <span style="color: #FF0000;">*</span>服务范围
                      </div>
                      <div class="xyg-comp-list-select-item-content">
                          <input type="text"  id="serviceTenet" value="${webCorporation.serviceTenet}" maxlength="100" placeholder="请先填写服务范围" />
                      </div>
                  </div>
                  <div class="xyg-comp-list-select-item">
                      <div class="xyg-comp-list-select-item-title">
                          <span style="color: #FF0000;">*</span>服务宗旨
                      </div>
                      <div class="xyg-comp-list-select-item-content">
                          <input type="text"  id="serviceArea" value="${webCorporation.serviceArea}" maxlength="100" placeholder="请先填写服务宗旨" />
                      </div>
                  </div>

                  <div class="xyg-comp-pic" style="margin-top: 0.5rem;">
                      <div class="xyg-comp-pic-title">
                          <span style="color: #FF0000;"></span>筹备发起人情况
                      </div>
                      <div id="cbfqrContent">

                      </div>
                      <div class="xyg-comp-pic-add" onclick="addUserPopup(1,1,'')">
                          添加人员
                      </div>
                  </div>
                  <div class="xyg-comp-pic" style="margin-top: 0.5rem;">
                      <div class="xyg-comp-pic-title">
                          <span style="color: #FF0000;"></span>拟任社团负责人情况
                      </div>
                      <div id="fzrContent">

                      </div>
                      <div class="xyg-comp-pic-add" onclick="addUserPopup(2,1,'')">
                          添加人员
                      </div>
                  </div>
                  <div class="xyg-comp-list-select-item" style="margin-top: 0.5rem;">
                      <div style="float: left;font-size: 14px;font-color:#cc0000;">免责声明：</div>
                      <div style="float: left; line-height: 2.2rem;"><input type="checkbox" id="checkSelect"/><a  href="/phone/article?id=20190705221828014229113229470092&memberId=${memberId}" style="color: #cc0000;font-size: 14px"> 点击详情</a></div>
                      <div style="float: right; line-height: 2.2rem;color: #d2d2d2; font-size: 14px;">
                          &nbsp;请勾选，方可提交
                      </div>
                      <div class="clearBoth"></div>
                  </div>
              </div>
              <div class="xyg-bottom">
                  <button type="button" id="submitBtn" class="weui-btn weui-btn_warn">立即报名</button>
              </div>
          </div>
      </div>
      <!--内容结束-->
  </div>

  <div id="addUser" class='weui-popup__container popup-bottom'>
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
          <div class="toolbar">
              <div class="toolbar-inner">
                  <a href="javascript:;" class="picker-button close-popup">关闭</a>
                  <h1 id="addUserTitle" class="title">筹备发起人</h1>
              </div>
          </div>
          <div class="modal-content">
              <div class="xyg-comp-list-select">
                  <div class="xyg-item-content">
                      <div class="xyg-comp-list-select-item" style="margin-top: 0.2rem;">
                          <div class="xyg-comp-list-select-item-title">
                              <span style="color: #FF0000;">*</span>姓 名
                          </div>
                          <div class="xyg-comp-list-select-item-content">
                              <input type="hidden" id="userType" />
                              <input type="hidden" id="userId" />
                              <input type="text" id="userName"  maxlength="12" placeholder="请先填写姓名"/>
                          </div>
                      </div>
                      <div class="xyg-comp-list-select-item">
                          <div class="xyg-comp-list-select-item-title">
                              <span style="color: #FF0000;">*</span>出生年月
                          </div>
                          <div class="xyg-comp-list-select-item-content">
                              <input type="text" id="userBrithday"  placeholder="请先选择出生年月"/>
                          </div>
                      </div>
                      <div class="xyg-comp-list-select-item">
                          <div class="xyg-comp-list-select-item-title">
                              <span style="color: #FF0000;">*</span>单位及职务
                          </div>
                          <div class="xyg-comp-list-select-item-content">
                              <input type="text"  id="userWorkPost" maxlength="50" placeholder="请先填写工作单位及职务"/>
                          </div>
                      </div>
                      <div class="xyg-comp-list-select-item">
                          <div class="xyg-comp-list-select-item-title">
                              <span style="color: #FF0000;">*</span>政治面貌
                          </div>
                          <div class="xyg-comp-list-select-item-content">
                              <input type="text"  id="userPolitical"  maxlength="10" placeholder="请先填写政治面貌" />
                          </div>
                      </div>
                  </div>
                  <div class="xyg-bottom">
                      <button type="button" id="addBtn" onclick="saveUserPopup()" class="weui-btn weui-btn_warn">添加</button>
                  </div>
              </div>
          </div>
      </div>
  </div>



  <div id="showSuccess" style="display:none;">
      <div class="weui-msg">
          <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
          <div class="weui-msg__text-area">
              <h2 class="weui-msg__title">申请成功，等待审核</h2>
              <p class="weui-msg__desc">您的信息已经提交审核<br/>我们会在1~3个工作日给您反馈<br/>请耐心等待！</p>
          </div>
          <div class="weui-msg__opr-area">
              <p class="weui-btn-area">
                  <a href="/serviceTenet/signUpList?memberId=${memberId}" class="weui-btn weui-btn_warn">确定</a>
              </p>
          </div>

      </div>
  </div>
  </div>
  <style type="text/css">
	  html,body{background:#f5f5f5;}
  	.xyg-comp-list-select{width:100%; height:auto;}
	  .xyg-comp-list-select .xyg-comp-pic{width:90%; padding:0.5rem 5%; background: #FFF;}
      .xyg-comp-list-select .xyg-comp-pic-title{width:100%;line-height:1.5rem; padding-bottom: 0.5rem; font-size: 0.8rem; color:#000; letter-spacing: 0.01rem; }

      .xyg-comp-list-select .xyg-comp-pic-add{width:100%;line-height:1.5rem; padding-bottom: 0.5rem; font-size: 0.8rem; margin-top: 0.4rem; text-align: center; color: #3d3d3d;letter-spacing: 0.01rem; }

      .xyg-comp-list-select .xyg-comp-pic-title-left{width: 50%; height: 6rem; float: left;}
	   .xyg-comp-list-select .xyg-comp-pic-title-left img{width: 100%; height: 6rem;}
	   .xyg-comp-list-select .xyg-comp-pic-title-right{width: 50%; height: 6rem; float: left;}
	  
	.xyg-comp-list-select-item{width:90%; padding:0px 5%; line-height:2.2rem; height:2.2rem;font-size: 0.8rem; color:#000; letter-spacing: 0.01rem; background: #FFF; border: 0.001rem solid #f5f5f5;}
	  .xyg-comp-list-select-item input::-webkit-input-placeholder {color: #999999;}
	.xyg-comp-list-select-item .xyg-comp-list-select-item-icon{width:70%; line-height:2rem; text-align:right; float:left; color: #999999;}
	.xyg-comp-list-select-item .xyg-comp-list-select-item-title{width:30%; height:2rem; text-align:left; float:left;}
	.xyg-comp-list-select-item .xyg-comp-list-select-item-content{width:70%; height:2rem; text-align:left; float:left;}
	.xyg-comp-list-select-item .xyg-comp-list-select-item-content input{width:100%; height:2rem; line-height:2rem;background-color:transparent;border:0; text-align:right;}
	.xyg-comp-xy{height:2rem; line-height:2rem; width:width:93%; margin:0px 2% 0px 5%;}
	.xyg-bottom{width:90%; height:auto;  margin:1.5rem 5%;}
  </style>
  </body>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="${s.base}/mobile/js/jquery-2.1.4.js"></script>
  <script src="${s.base}/mobile/js/jquery-weui.js"></script>
  <script src="${s.base}/mobile/js/dateUtil.js"></script>
  <script src="${s.base}/mobile/fonts/iconfont.js"></script>
  <script src="${s.base}/mobile/lib/Mdate/iScroll.js"></script>
  <script src="${s.base}/mobile/lib/Mdate/Mdate.js"></script>
  <script type="text/javascript">
      new Mdate("userBrithday", {
          beginYear: "1949",
          format: "-"
      });
      var memberId='${memberId}';
      $("#submitBtn").on("click",function(){
          var id = $("#id").val();
          var name = $("#name").val();
          if(name == null || name == "") {
              $.toast("请输入社团名称", "text");
              return false;
          }
          var num = $("#num").val();
          if(num == null || num == "") {
              $.toast("请输入社团人数", "text");
              return false;
          }
          var serviceTenet = $("#serviceTenet").val();
          if(serviceTenet == null || serviceTenet == "") {
              $.toast("请输入服务范围", "text");
              return false;
          }

          var serviceArea = $("#serviceArea").val();
          if(serviceArea == null || serviceArea == "") {
              $.toast("请输入服务宗旨", "text");
              return false;
          }
          var userList=new Array()
          //筹备发起人
          var cbList=$("#cbfqrContent .xyg-item-content");
          if(cbList.length>0){
              cbList.each(function (index,obj) {
                  var cbObj=new Object();
                  cbObj.id=$(obj).find(".userId").val();
                  cbObj.userType=$(obj).find(".userType").val();
                  cbObj.name=$(obj).find(".userName").val();
                  cbObj.brithdayStr=$(obj).find(".userBrithday").val();
                  cbObj.workPost=$(obj).find(".userWorkPost").val();
                  cbObj.political=$(obj).find(".userPolitical").val();
                  userList.push(cbObj);
              });
          }else{
              $.toast("请输入筹备发起人", "text");
              return false;
          }
            //拟任社团负责人
          var fzrList=$("#fzrContent .xyg-item-content");
          if(fzrList.length>0){
              fzrList.each(function (index,obj) {
                  var cbObj=new Object();
                  cbObj.id=$(obj).find(".userId").val();
                  cbObj.userType=$(obj).find(".userType").val();
                  cbObj.name=$(obj).find(".userName").val();
                  cbObj.brithdayStr=$(obj).find(".userBrithday").val();
                  cbObj.workPost=$(obj).find(".userWorkPost").val();
                  cbObj.political=$(obj).find(".userPolitical").val();
                  userList.push(cbObj);
              });
          }else{
              $.toast("请输入拟任社团负责人", "text");
              return false;
          }
          if(!$("input[type='checkbox']").prop("checked")){
              $.toast("请先阅读用户承诺书，并勾选", "text");
              return false;
          }

          var param = {id:id,memberId:memberId,name:name,num:num,serviceTenet:serviceTenet,serviceArea:serviceArea,userList:JSON.stringify(userList)};
          $.showLoading("正在提交中");
          $.post("/phone/corporationSave",param,function(result){
              if(0==result.code){
                  $.hideLoading();
                  $("#showContent").hide();
                  $("#showSuccess").show();
              }else{
                  $.hideLoading();
                  $.alert(result.msg);
              }
          },"json");
      });

      //修改或编辑选型
      function addOrUpdate(userType,userId) {
          $.actions({
              actions: [
                  {
                      text: "编辑",
                      className: "bg-warning",
                      onClick: function() {
                          addUserPopup(userType,2,userId)
                      }
                  },
                  {
                      text: "删除",
                      className: 'bg-danger',
                      onClick: function() {
                        $("#"+userId).remove();
                      }
                  }
              ]
          });
      }
      //社团用户类型：1、筹备发起人，2、社团负责人
      //doType：1、添加，2、修改
      //userId:修改时的参数userId
      function addUserPopup(userType,doType,userId) {
          $("#userType").val(userType);
          $("#userId").val(userId);
          if(userType==1){
              $("#addUserTitle").html("筹备发起人");
          }else{
              $("#addUserTitle").html("社团负责人");
          }
          var userName="";
          var userBrithday="";
          var userWorkPost="";
          var userPolitical="";
          if(doType==2){
              userName=$("#"+userId).find(".userName").val();
              userBrithday=$("#"+userId).find(".userBrithday").val();
              userWorkPost=$("#"+userId).find(".userWorkPost").val();
              userPolitical=$("#"+userId).find(".userPolitical").val();
          }
          $("#userName").val(userName);
          $("#userBrithday").val(userBrithday);
          $("#userWorkPost").val(userWorkPost);
          $("#userPolitical").val(userPolitical);
          $("#addUser").popup();
      }

      function saveUserPopup() {
          var userId = $("#userId").val();

          var userType = $("#userType").val();
          var userName = $("#userName").val();
          if(userName == null || userName == "") {
              $.toast("请填写姓名", "text");
              return false;
          }
          var userBrithday = $("#userBrithday").val();
          if(userBrithday == null || userBrithday == "") {
              $.toast("请选择出生日期", "text");
              return false;
          }
          var userWorkPost = $("#userWorkPost").val();
          if(userWorkPost == null || userWorkPost == "") {
              $.toast("请先填写工作单位及职务", "text");
              return false;
          }
          var userPolitical = $("#userPolitical").val();
          if(userPolitical == null || userPolitical == "") {
              $.toast("请先填写政治面貌", "text");
              return false;
          }

          var content=
                '<div class="xyg-comp-list-select-item" style="margin-top: 0.2rem;">'+
                      '<div class="xyg-comp-list-select-item-title">'+
                      '<span style="color: #FF0000;">*</span>姓 名'+
                      '</div>'+
                      '<div class="xyg-comp-list-select-item-content">'+
                      '<input type="hidden"  class="userType" value="'+userType+'" />'+
                      '<input type="text"  class="userName" value="'+userName+'" />'+
                      '</div>'+
                  '</div>'+
                  '<div class="xyg-comp-list-select-item">'+
                      '<div class="xyg-comp-list-select-item-title">'+
                      '<span style="color: #FF0000;">*</span>出生年月'+
                      '</div>'+
                      '<div class="xyg-comp-list-select-item-content">'+
                      '<input type="text"  class="userBrithday" value="'+userBrithday+'" />'+
                      '</div>'+
                  '</div>'+
                  '<div class="xyg-comp-list-select-item">'+
                      '<div class="xyg-comp-list-select-item-title">'+
                      '<span style="color: #FF0000;">*</span>单位及职务'+
                      '</div>'+
                      '<div class="xyg-comp-list-select-item-content">'+
                      '<input type="text"  class="userWorkPost" value="'+userWorkPost+'" />'+
                      '</div>'+
                  '</div>'+
                  '<div class="xyg-comp-list-select-item">'+
                      '<div class="xyg-comp-list-select-item-title">'+
                      '<span style="color: #FF0000;">*</span>政治面貌'+
                      '</div>'+
                      '<div class="xyg-comp-list-select-item-content">'+
                      '<input type="text"  class="userPolitical" value="'+userPolitical+'" />'+
                      '</div>'+
                  '</div>';
          if(userId==null||userId==""){
              //增加操作
              userId = (new Date()).getTime();
              content='<div class="xyg-item-content" id="'+userId+'" onclick="addOrUpdate('+userType+',\''+userId+'\')"><input type="hidden"  class="userId" value="'+userId+'" />'+content+'</div>';
              if(userType==1){
                  $("#cbfqrContent").append(content);
              }else{
                  $("#fzrContent").append(content);
              }
          }else{
              //编辑操作
              $("#"+userId).html(content);
          }
          $.closePopup();

      }



  </script>
</html>

